<template>
    <!-- 商品列表 -->
    <div class="view_product">
        <card title="产品列表">
            <template #actions>
                <el-select class="w-28" v-model="queryByWhat">
                    <el-option v-for="(val, key) in queryBySomething" :key="key" :value="key" :label="val" />
                </el-select>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    :placeholder="placeholder"
                    prefix-icon="el-icon-search"
                    clearable
                />
            </template>

            <template #default>
                <el-table :data="tableData" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" />
                    <el-table-column prop="spuName" label="产品名"></el-table-column>
                    <el-table-column prop="shopName" label="店铺名"></el-table-column>
                    <el-table-column prop="stock" label="数量"></el-table-column>
                    <el-table-column prop="minQuantity" label="起订数量"></el-table-column>
                    <el-table-column prop="categoryName" label="所属分类"></el-table-column>
                    <el-table-column label="是否溯源">
                        <template #default="{ row: { isTracker } }">
                            {{ productTraceability[+isTracker] }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="onLineStatus" label="上架状态">
                        <template #default="{ row: { onLineStatus } }">
                            <el-tag effect="dark" :type="productSaleStatus[onLineStatus].tagType">
                                {{ productSaleStatus[onLineStatus].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="审核状态">
                        <template #default="{ row: { auditStatus } }">
                            <el-tag :type="productReviewStatus[auditStatus].tagType">
                                {{ productReviewStatus[auditStatus].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="{ row: { spuId, auditStatus } }">
                            <el-button type="text" @click="openReviewDialog(spuId, auditStatus)">修改</el-button>
                            <el-button type="text" @click="view(spuId)">查看详情</el-button>
                            <el-button type="text" @click="viewSpuDesc(spuId)">查看描述</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <template #bottom-left>
                <el-button type="primary" @click="changeProductSaleStatus(1)">批量上架</el-button>
                <el-button type="danger" @click="changeProductSaleStatus(2)">批量下架</el-button>
            </template>

            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 修改审核状态对话框 -->
        <el-dialog :visible.sync="visible" title="更改审核状态">
            <template #default>
                <el-radio v-model="reviewStatus" v-for="(val, key) in productReviewStatus" :key="key" :label="+key">
                    {{ val.text }}
                </el-radio>
            </template>
            <template #footer>
                <el-button type="primary" @click="changeProductReviewStatus">保存</el-button>
            </template>
        </el-dialog>

        <!-- 产品详情对话框 -->
        <el-dialog :visible.sync="visible2" title="产品详情" custom-class="details_dialog">
            <template #default>
                <div class="desc_list">
                    <dl class="desc_list-content">
                        <div class="desc_list-item">
                            <dt>spu名</dt>
                            <dd>{{ details.spuName }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>店铺</dt>
                            <dd>{{ details.shopName }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>分类</dt>
                            <dd>{{ details.categoryName }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>品牌</dt>
                            <dd>{{ details.brandName }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>数量</dt>
                            <dd>{{ details.stock }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>起订数量</dt>
                            <dd>{{ details.minQuantity }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>单价</dt>
                            <dd>{{ details.price }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>所在地</dt>
                            <dd>{{ details.address }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>是否可溯源</dt>
                            <dd>{{ details.isTracker }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>创建时间</dt>
                            <dd>{{ details.createTime }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>sku信息</dt>
                            <el-table :data="details.skuList">
                                <el-table-column type="index" label="#" align="center" />
                                <el-table-column prop="skuName" label="sku名" />
                                <el-table-column prop="skuTitle" label="标题" />
                                <el-table-column prop="skuSubtitle" label="副标题" />
                                <el-table-column prop="stock" label="数量" />
                                <el-table-column prop="price" label="单价/元" :formatter="amountFormatter" />
                                <el-table-column prop="skuSort" label="顺序" />
                                <el-table-column label="操作">
                                    <template #default="{ row }">
                                        <el-button type="text" @click="viewSkuImages(row.skuId)">查看图片</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </dl>
                </div>
            </template>
        </el-dialog>

        <!-- 图片列表对话框 -->
        <el-dialog :visible.sync="visible3" title="图片列表" custom-class="image_list_dialog">
            <el-table :data="imageList">
                <el-table-column type="index" label="#" align="center" />
                <el-table-column prop="picName" label="图片名"></el-table-column>
                <el-table-column label="预览" ref="images">
                    <template #default="{ row }">
                        <img :src="row.picUrl" :alt="row.alt" />
                    </template>
                </el-table-column>
                <el-table-column label="是否默认主图">
                    <template #default="{ row }">
                        {{ row.defaultPic ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column label="顺序" prop="picSort"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';
import { formatAmount } from '../../functions';

// 产品上下架id集
let productIdSet = null;
// 更改审核状态的id
let productId;

export default {
    data() {
        return {
            visible: false,
            visible2: false,
            visible3: false,

            tableData: [],
            details: {},

            reviewStatus: 1,
            queryByWhat: 'spuName',

            imageList: [],
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/pms/findSpu',
            paginable: true,
            params: {
                queryString: 'queryByWhat',
            },
        }),
    ],

    computed: {
        // 按某物查询
        queryBySomething() {
            return {
                spuName: '商品名',
                shopName: '店铺名',
                categoryName: '所属分类',
            };
        },

        // 占位符
        placeholder() {
            return `按${this.queryBySomething[this.queryByWhat]}查询`;
        },

        // 金额格式化器
        amountFormatter() {
            return function (row, column, cellValue) {
                return formatAmount(cellValue);
            };
        },

        // >>>>> 产品状态常量
        // 产品销售状态
        productSaleStatus() {
            return {
                1: { tagType: 'success', text: '销售中' },
                2: { tagType: 'danger', text: '已下架' },
            };
        },
        // 产品审核状态
        productReviewStatus() {
            return {
                1: { tagType: 'success', text: '审核通过' },
                2: { tagType: 'warning', text: '待审核' },
            };
        },
        // 产品可追溯性
        productTraceability() {
            return {
                0: '不可溯源',
                1: '可溯源',
            };
        },
        // 产品状态常量 <<<<<
    },

    methods: {
        // 改变产品销售状态
        changeProductSaleStatus(status) {
            if (!productIdSet || !productIdSet.length) return;

            this.$post('/yxl/pms/updateOnLineStatus', {
                spuIds: productIdSet.toString(),
                status,
            }).then(this.query);
        },

        // 改变产品审核状态
        changeProductReviewStatus() {
            this.$post('/yxl/pms/updateAuditStatus', {
                spuId: productId,
                status: this.reviewStatus,
            }).then(() => {
                this.visible = false;
                this.query();
            });
        },

        // 打开审核对话框
        openReviewDialog(spuId, auditStatus) {
            productId = spuId;
            this.reviewStatus = auditStatus;
            this.visible = true;
        },

        // 处理选择框变化
        handleSelectionChange(selection) {
            productIdSet = selection.map(({ spuId }) => spuId);
        },

        // 查看产品详情
        view(spuId) {
            this.$get('/yxl/pms/findSpuDetails', { spuId }).then(res => {
                this.details = res;
                this.visible2 = true;
            });
        },

        // 查看spu描述
        viewSpuDesc(spuId) {
            this.$get('/yxl/pms/findSpuDescription', { spuId }).then(res => {
                this.$alert(res, 'spu描述');
            });
        },

        // 查看sku图片信息
        viewSkuImages(skuId) {
            this.$get('/yxl/pms/findSkuImages', { skuId }).then(res => {
                this.imageList = res;
                this.visible3 = true;
            });
        },
    },
};
</script>